<template>
  <div>
    <div class="top">
      <p style="color: rgb(59, 59, 59);">全部课程</p>
      <p @click="sortChange">
        <img :src="sortImage" alt="" style="height: 10px;">
        <span style="display: inline-block; margin-left: 4px; font-size:14px; color: rgb(194, 134, 100)">{{ sortText }}</span>
      </p>
    </div>
    <div class="bottom">
      <!-- Skeleton Screen -->
      <div v-if="loading" class="skeleton">
        <div class="item-skeleton">
          <div class="left-skeleton"></div>
          <div class="title-skeleton">
            <div class="line-skeleton"></div>
            <div class="line-skeleton short"></div>
          </div>
          <div class="right-skeleton">
            <div class="line-skeleton"></div>
          </div>
        </div>
      </div>
      <!-- Actual Content -->
      <div v-else>
        <div v-for="item in MvList.classList" :key="item.id" class="item" @click="InPage(item.name)">
          <div class="left">{{ item.id }}</div>
          <div class="title">
            <p style="font-size: 16px;">{{ item.name }}</p>
            <p><img src="../../../state/时钟.png" alt="" style="width: 16px; margin-top: 15px">
              <span
                style="display: inline-block; position: relative; top: -3px; color: rgb(205, 157, 130); left: 5px">--:--
                </span>
              <img src="../../../state/u270.svg" alt="" style="position: relative; left: 19px; top: -0.4px">
            </p>
          </div>
          <div class="right">
            <img src="../../../state/u229.svg" alt="" v-show="item.status === false">
            <img src="../../../state/u169.svg" alt="" v-show="item.status === true">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useDateStore } from '../../stores/dataStore';
import { storeToRefs } from 'pinia';
const router = useRouter();
const dataStore = useDateStore();
const {MvList} = storeToRefs(dataStore);
const catelist = ref([]);
const loading = ref(true);

const sortImage = ref('../../../state/u248.svg');
const sortStatus = ref(false);
const sortText = ref('正序');
const InPage = (value) =>{
  router.push(`/info/?value=${value}`);
}

const getList = async () => {
  try {
    const res = await axios.get(`http://localhost:3000/getCateList/`);
    catelist.value = res.data.list;
  } catch (error) {
    console.error('Failed to fetch category list:', error);
  } finally {
    loading.value = false; // Ensure loading is set to false after the request
  }
};

onMounted(() => {
  getList();
});

const sortChange = () => {
  sortStatus.value = !sortStatus.value;
  sortImage.value = sortStatus.value ? '../../../state/u250.svg' : '../../../state/u248.svg';
  sortText.value = sortStatus.value ? '倒序' : '正序';
};
</script>

<style scoped>
.right {
  position: absolute;
  bottom: 5px;
  right: 20px;
}

.left {
  color: rgb(194, 133, 98);
  font-size: large;
  font-weight: 600;
}

.title {
  margin-top: 3px;
  color: rgb(0, 0, 0);
  font-weight: 500;
  font-family: '黑体';
  margin-left: 5px;
}

.item {
  width: 90%;
  position: relative;
  height: 70px;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin: 10px auto;
  display: flex;
  padding-left: 10px;
  padding-top: 10px;
  box-sizing: border-box;
}

.bottom {
  overflow: scroll;
}

* {
  margin: 0;
  padding: 0;
}

.top {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}

.skeleton {
  display: flex;
  flex-direction: column;
}

.item-skeleton {
  display: flex;
  align-items: center;
  margin: 10px auto;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.left-skeleton {
  width: 30px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 3px;
}

.title-skeleton {
  display: flex;
  flex-grow: 1;
  margin-left: 10px;
}

.line-skeleton {
  width: 100%;
  height: 10px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin-top: 5px;
}

.short {
  width: 50%;
}

.right-skeleton {
  width: 20px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin-left: auto;
}
</style>